<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./0.css">
</head>
<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
            <div class="tab_con">
                <div class="current">商品介绍内容</div>
                <div>规格包装内容</div>
                <div>售后保障</div>
                <div>商品评价内容</div>
                <div>手机社区内容</div>
            </div>
    </div>
</body>
</html>
<script>
   var divs=document.querySelectorAll('.tab_con>div')
   var lis=document.querySelectorAll('li')
   for(let i=0;i<lis.length;i++){
    // lis[i].index=i;
    lis[i].onclick=function(){
        for (var j=0;j<lis.length;j++){
            lis[j].classList.remove('current')
            divs[j].classList.remove('current')
        }
        this.classList.add('current')
        // divs[this.index].classList.add('current')
        divs[i].classList.add('current')
    }
   }
</script>